<!-- 公共布局组件 -->
<template>
	<view class="custom-camera">
		<view class="tip" :style="{'padding-top':mt+'rpx'}">
			请将身份证置于框内并尝试对齐边缘
		</view>
		<view class="camera-wrap" :style="{height:cameraHeight+'px'}">
			<slot></slot>
		</view>
		<view class="camera-options">
			<view class="camera-options-left camera-item">
				<image src="@/static/my/commonInformation/icon-album.png" mode="scaleToFill" @tap="handleClikFn('album')"></image>
				<text>相册</text>
			</view>
			<view class="camera-options-center">
				<image src="@/static/my/commonInformation/img_takephone.png" mode="scaleToFill" @tap="handleClikFn('shutter')"></image>
			</view>
			<view class="camera-options-ritht camera-item">
				<image src="@/static/my/commonInformation/img_ligh.png" mode="scaleToFill" @tap="handleClikFn('ligh')"></image>
				<text>闪光灯</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 提供一个相机的插槽位置
	// 底部可以自定义最右侧按钮（相册/反转）
	export default {
		data() {
			return {
				cameraHeight: uni.getSystemInfoSync().windowHeight - 155,
				mt:(uni.getSystemInfoSync().screenHeight-550)/2
			}
		},
		methods: {
			handleClikFn(instruct) {
				this.$emit('instruct', instruct)
			}
		}
	}
</script>

<style lang="less">
	.custom-camera {
		height: 100%;
		background-color: #333333;
		
		.tip{
			text-align: center;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
			margin-bottom: 40rpx;
		}

		.camera-wrap {
			// background-color: #f90;
		}

		.camera-options {
			width: 100%;
			position: fixed;
			bottom: 74rpx;
			display:flex;
			align-items: center;
			justify-content: center;
			
			.camera-options-center{
				margin: 0 132rpx;
				image{
					width: 142rpx;
					height: 142rpx;
				}
			}
			
			.camera-item{
				display: flex;
				align-items: center;
				flex-direction: column;
				image{
					width: 48rpx;
					height: 48rpx;
				}
				text{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33rpx;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>
